<template>
  <div class="app-container">
    <div class="filter-container">
      <el-form :inline="true" :model="formModel">
        <el-form-item class="no-warn-item" label="角色名称:" prop="roleName">
          <el-input
            v-model="formModel.roleName"
            placeholder="角色名称"
            class="filter-item filter-200"
            clearable
          />
        </el-form-item>
        <el-row class="submit-area">
          <el-col :span="24">
            <el-button type="primary" v-if="hasPermission('role_select')" plain @click="queryList(false)">查询</el-button>
            <el-button type="primary" v-if="hasPermission('role_add')" plain @click="handleAdd">新增</el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <h3>角色信息列表:</h3>
    <hey-table ref="table" :columns="columns" @row-click="handleRowClick" :is-radio="true" :auto-width="false">
      <template slot="tools">
        <el-table-column
          label="操作"
          width="160"
          fixed="right"
          header-align="center"
          align="center"
        >
          <template slot-scope="{row}">
            <span class="hey_tools_btn" v-if="hasPermission('role_edit')" @click="handleEdit(row)">编辑</span>
            <span class="hey_tools_btn" v-if="hasPermission('role_del')" @click="handleDelete(row)">删除</span>
          </template>
        </el-table-column>
      </template>
    </hey-table>
    <h3>角色权限列表:</h3>
    <el-row>
      <el-table
        :data="tableData1"
        style="width: 100%"
        row-key="menuId"
        :key="Math.random()"
        max-height="500"
        border
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
        <el-table-column
          prop="menuName"
          label="菜单名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuTypeLable"
          label="菜单类型"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuPath"
          label="菜单路径"
          width="250"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="menuComponent"
          label="菜单组件"
          width="250"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="permissionCode"
          label="权限码"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
        <el-table-column
          prop="parentName"
          label="父节点名称"
          header-align="center"
          align="center"
          show-overflow-tooltip
        >
        </el-table-column>
      </el-table>
    </el-row>
    <el-dialog
      v-dialogDrag
      v-if="dialogVisible"
      :close-on-click-modal="false"
      title="角色信息"
      :visible.sync="dialogVisible"
      width="50%"
    >
      <role-mnt :page-type="operType" :edit-data="editData" @mntSuc="queryList" />
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: 'RoleList',
  components: {
    RoleMnt: () => import('./role-mnt')
  },
  props: {},
  data() {
    return {
      dialogVisible: false,
      operType: '',
      editData: {},
      tableData1: [],
      formModel: {
        isDelete:'0',
        roleName: ''
      },
      columns: [
        { title: '角色名称', key: 'roleName' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime'},
        { title: '最后修改人', key: 'lastUpdateUsername' },
      ],
      columns1: [
        { title: '角色名称', key: 'roleName' },
        { title: '创建时间', key: 'createTime' },
        { title: '创建人', key: 'createUsername' },
        { title: '最后修改时间', key: 'lastUpdateTime'},
        { title: '最后修改人', key: 'lastUpdateUsername' },
      ]
    }
  },
  computed: {

  },
  mounted() {

  },
  methods: {
    handleRowClick(row) {
      if (row) {
        const param = {pageNum:1,pageSize:9999}
        this.tableData1 = []
        param.roleId = row.roleId
        param.isDelete = '0'
        this.get('/role/queryRoleAuthority', param).then(res => {
          this.tableData1 = res
        })
      } else {
        //清空子表数据
        this.tableData1 = []
      }
    },
    queryList() {
      this.tableData1 = []
      this.$refs.table.query('/role/queryRoleInfoTbl', this.formModel, '', false)
    },
    handleAdd() {
      this.operType = 'add'
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogVisible = true
      this.operType = 'edit'
      this.editData = row || {}
    },
    handleDelete(row) {
      this.$sure('确认删除？', _ => {
        this.post('/role/maintainRoleInfoTbl', { roleId: row.roleId,operateType:'03'}).then(_ => {
          this.$info('删除成功', this.queryList)
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
